<script setup>
import Tabbarstudent from "../../pages/componentstudent/Tabbarstudent.vue";
import uniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import uniDatetimePicker
  from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue";
import allAddress from "../../components/lingdang-AddressPicker/AddressData.js";
import {ref} from 'vue'
import uniFilePicker from "../../uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue";
const leaveAddress=ref('请选择家庭所在省市区/县')
const addresschange=(value)=>{
  const indexArr=value.detail.value
  const shengIndex=indexArr[0]
  const shiIndex=indexArr[1]
  const quIndex=indexArr[2]
  leaveAddress.value=allAddress[shengIndex].name+'/'+allAddress[shengIndex].children[shiIndex].name+'/'+allAddress[shengIndex].children[shiIndex].children[quIndex].name
}
const tonext11=()=>{
  //跳转到子页面
  uni.navigateTo({url:'/studens/return/dianzikeji'})
}
const disablse=ref(true)
const isCheck=ref(false)
const checkChange=(obj)=>{
  disablse.value=(obj.detail.value.length==0)
}
const tonext12=()=>{
  //跳转到子页面
  let flag=confirm("是否确认提交")
  if(flag){
    uni.navigateTo({url:'/studens/return/chneggong'})
  }

}
</script>
<template>
    <view>
      <view id="ziyuan">
        <view class="zy">
          <view><image class="tp9" src="/static/image/jingshi.png"></image> <view class="wz">亲爱的同学！自愿返乡申请现已经开通，请按需申请。辅导员
            同意后方可离校。</view></view>
         <view>
          <uni-section   class="bk" title="离校时间"  type="line" padding>
             <view class="example-body">
               <uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
             </view>
           </uni-section>
           <uni-section  class="bk3"  title="家庭地址"  type="line" padding>
             <view class="example-body1">
               <AddressPicker class="ad" @change="addresschange" :level="3">{{leaveAddress}}</AddressPicker>
             </view>
           </uni-section>
           <uni-section  class="xq" title="补充详细地址"  type="line" padding>
             <view>
             <uni-easyinput   errorMessage v-model="value" focus placeholder="请输入家庭所在详细地址" @input="input"></uni-easyinput>
             </view>
           </uni-section>
           <uni-section  class="bc" title="申请理由"  type="line" padding>
             <view class="textarea">
               <textarea ></textarea>
             </view>
           </uni-section>
           <uni-section  class="tys" title="请上传家长知情同意书"  type="line" padding>
           <!--             <view class="textarea2">-->
           <!--               <view class="tpk"><image class="tp8" src="/static/image/shangchuang.png"></image>-->
           <!--                 <text class="tpwz">上传</text>-->
           <!--               </view>-->
           <!--             </view>-->
           <view class="tp16">
             <uni-file-picker class="tp2"  limit="9" title="最多选择9张图片"></uni-file-picker>
           </view>
           <view class="wb">务必上传签字图片</view>
           <view class="wb">支持扩展名：JPEG、PNG、JPGE限制大小10M以下、1张</view>
           <view class="tz" @click="tonext11">
             <text>《电子科技大学关于近期教学工作安排的通知》</text> </view>
             <view>
           <view class="kzm">
             <checkbox-group @change="checkChange" >
               <label>
                 <checkbox :value="isCheck" color="#FFCC33" style="transform:scale(0.7)" />
               </label>
             </checkbox-group>
            <text>我已知晓通知内容并严格执行</text><br>
           </view>
             <button @click="tonext12" :disabled="disablse" type="primary" >提交</button>
             </view>
         </uni-section>

        </view>
        </view>
      <Tabbarstudent :cur-index="1"></Tabbarstudent>
    </view>
    </view>
</template>

<style scoped>
.tp16{
  width: 100%;
  height: 200px;
  background-color: white;
}
#ziyuan{
  width: 100%;
  height: 1050px;
  background-color:#F0F3FA;
  position: relative;
  top: 0px;
}
.tp{
  background-color: white;
}
.kzm{
  display: flex;
height: 50px;
  position: relative;
  top: 20px;
  left: 70px;
}
.tz{
  width: 322px;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #2873FF;
  letter-spacing: 0;
  text-align: center;
  position: relative;
  top: 9px;
  left: 40px;
}
.textarea2{
  width: 90px;
  height: 90px;
  background-color: white;
}
.wb{
  width: 322px;
  height: 20px;
  font-weight: 400;
  font-size: 12px;
  color: #A0A0A0;
}
.tpwz{
  width: 26px;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #A0A0A0;
  letter-spacing: 0;
  position: relative;
  top: 40px;
  left: 6px;
}
.tp8{
  width: 22px;
  height: 22px;
  position: relative;
  top: 25px;
  left: 30px;
}
.bk3{
  background-color:#F0F3FA ;
  position: relative;
  top: 50px;
}
.tys{
  background-color:#F0F3FA ;
  position: relative;
  top: 290px;
}
.textarea{
  background-color: white;
}
.bk{
  background-color:#F0F3FA ;
}
.example-body1{
 height: 30px;
  background-color: white;
}
.wz{
  width: 327px;
  height: 34px;
  font-weight: 400;
  font-size: 12px;
  color: #EE7130;
  letter-spacing: 0;
  position: relative;
  left: 40px;
  top: -16px;
}
.xq{
  position: relative;
  top: 80px;
  background-color:#F0F3FA ;
}
.bc{
  position: relative;
  top: 130px;
  background-color:#F0F3FA ;
}
.tp9{
  position: relative;
  top: 6px;
  left: 10px;
  width: 16px;
  height: 16px;
}
.zy{
  width: 100%;
  height: 50px;
  background-color: #FFECE2;
}
uni-view{
  height: 100%;
}
</style>